<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>首页--工作台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../resources/css/public.css" media="all"/>
    <style>
        .echarts{
            margin-top: 20px;
            width: 100%;
            margin-bottom: 50px;
        }

        .echarts div{
            margin-left: 20%;
        }

        #inport,#sale{
            display: none;
        }

    </style>

</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote layui-bg-green">
    <div id="nowTime"></div>
</blockquote>
<div class="panel layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2">
			<a href="javascript:;">
				<div class="panel_icon layui-bg-blue">
					<i class="layui-anim seraph icon-clock"></i>
				</div>
				<div class="panel_word">
					<span class="loginTime"></span>
					<cite>上次登录时间</cite>
				</div>
			</a>
		</div>
</div>

<div>
    <button class="btn lay-submit" id="shop1">商品与供应商的统计</button>
    <button class="btn lay-submit" id="inport1">商品与进货的统计</button>
    <button  class="btn lay-submit" id="sale1">商品与销售的统计</button>
</div>
<!--统计图表-->
<!--统计商品与供应商的关系，取三个-->
<div class="echarts">
    <div id="shop" style="width: 1000px;height:500px;"></div>
    <!--统计商品与进货之间的关系，取三个-->
    <div id="inport" style="width: 1000px;height: 500px;"></div>
    <!--统计商品与销售之间的关系，取三个-->
    <div id="sale" style="width: 1000px;height: 500px;"></div>
</div>

<script type="text/javascript" src="../resources/layui/layui.js"></script>
<script type="text/javascript" src="../resources/echarts/echarts.min.js"></script>

<script type="text/javascript">
    //得到当前的登陆人信息
    var currentUserName = '[[${session.username}]]';

    //获取系统时间
    var newDate = '';
    getLangDate();

    //值小于10时，在前面补0
    function dateFilter(date) {
        if (date < 10) {
            return "0" + date;
        }
        return date;
    }

    function getLangDate() {
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth() + 1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午"); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year) + "年" + dateFilter(month) + "月" + dateFilter(date) + "日 " + " " + dateFilter(hour) + ":" + dateFilter(minute) + ":" + dateFilter(second);
        document.getElementById("nowTime").innerHTML = "亲爱的【" + currentUserName + "】，" + timeValue + "好！ 欢迎使用 ERP-商务管理系统。当前时间为： " + newDate + "　" + week;
        setTimeout("getLangDate()", 1000);
    }

    layui.use(['form', 'element', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            element = layui.element;
        $ = layui.jquery;
        //上次登录时间【此处应该从接口获取，实际使用中请自行更换】
        $(".loginTime").html(newDate.split("日")[0] + "日</br>" + newDate.split("日")[1]);
        //icon动画
        $(".panel a").hover(function () {
            $(this).find(".layui-anim").addClass("layui-anim-scaleSpring");
        }, function () {
            $(this).find(".layui-anim").removeClass("layui-anim-scaleSpring");
        })
        $(".panel a").click(function () {
            parent.addTab($(this));
        })
        //最新文章列表
        $.get("../resources/json/newsList.json", function (data) {
            var hotNewsHtml = '';
            for (var i = 0; i < 5; i++) {
                hotNewsHtml += '<tr>'
                    + '<td align="left"><a href="javascript:;"> ' + data.data[i].newsName + '</a></td>'
                    + '<td>' + data.data[i].newsTime.substring(0, 10) + '</td>'
                    + '</tr>';
            }
            $(".hot_news").html(hotNewsHtml);
            $(".userAll span").text(data.length);
        })
    })

</script>
<script src="../resources/js/jquery-1.11.1-min.js"></script>
<script>
    $(function (){
        $.ajax({
            url:"/echarts/shop",
            data:{},
            type:'get',
            dataType:'json',
            success:function (data){
                var myChart = echarts.init(document.getElementById('shop'));
                var datax = [];
                var datay = [];
                //编写x,y
                $.each(data.data,function (index,obj){
                    datax[index] = obj.provider;
                    datay[index] = obj.num;
                })
                var option = {
                    title:{
                        text:'统计前三商品数据的供应商',
                        textStyle:{
                            fontSize:15,
                        }
                    },
                    tooltip:{},
                    xAxis:{
                        data:datax
                    },
                    yAxis:{},
                    series:[
                        {
                            name:'提供商品数据',
                            type:'bar',
                            data:datay,
                            itemStyle:{
                                normal:{
                                    color : "#ADD8E6"
                                }
                            }
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })
    })
</script>
<script>
    $(function (){
        $.ajax({
            url:"/echarts/inport",
            data:{},
            type:'get',
            dataType:'json',
            success:function (data){
                var myChart = echarts.init(document.getElementById('inport'));
                var datax = [];
                var datay = [];
                //编写x,y
                $.each(data.data,function (index,obj){
                    datax[index] = obj.goodsName;
                    datay[index] = obj.num;
                })
                var option = {
                    title:{
                        text:'统计前三进货量的商品',
                        textStyle:{
                            fontSize:15,
                        }
                    },
                    tooltip:{},
                    xAxis:{
                        data:datax
                    },
                    yAxis:{},
                    series:[
                        {
                            name:'提供商品数据',
                            type:'bar',
                            data:datay,
                            itemStyle:{
                                normal:{
                                    color : "#ADD8E6"
                                }
                            }
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })
    })
</script>
<script>
    $(function (){
        $.ajax({
            url:"/echarts/sale",
            data:{},
            type:'get',
            dataType:'json',
            success:function (data){
                var myChart = echarts.init(document.getElementById('sale'));
                var datax = [];
                var datay = [];
                //编写x,y
                $.each(data.data,function (index,obj){
                    datax[index] = obj.goodsName;
                    datay[index] = obj.num;
                })
                var option = {
                    title:{
                        text:'统计销量最多的三件商品',
                        textStyle:{
                            fontSize:15,
                        }
                    },
                    tooltip:{},
                    xAxis:{
                        data:datax
                    },
                    yAxis:{},
                    series:[
                        {
                            name:'提供商品数据',
                            type:'bar',
                            data:datay,
                            itemStyle:{
                                normal:{
                                    color : "#ADD8E6"
                                }
                            }
                        }
                    ]
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }

        })
        $("#shop1").click(function (){
            $("#shop").show();
            $("#inport").hide();
            $("#sale").hide();
        });
        $("#inport1").click(function (){
            $("#inport").show();
            $("#shop").hide();
            $("#sale").hide();
        });
        $("#sale1").click(function (){
            $("#sale").show();
            $("#shop").hide();
            $("#inport").hide();
        })
    })
</script>
</body>
</html>
